import React, { Component } from 'react'
// 异步的表现
// 1, 生命周期里面直接进行 setState
// 2, 合成事件当中进行 setState
// 同步表现
// 1, 定时器
// 2, 原生事件

export default class App extends Component {
  btnRef = React.createRef()
  state = {
    num: 0,
  }
  componentDidMount() {
    /* this.setState({
      num: 8,
    })
    console.log(this.state.num) // 0 */
    setTimeout(() => {
      this.setState({
        num: 8,
      })
      console.log(this.state.num) // 表现形式就是同步的 8
    })

    this.btnRef.current.onclick = () => {
      this.setState({
        num: 9,
      })
      console.log(this.state.num) // 9
    }
  }
  render() {
    return (
      <div>
        <p>App: {this.state.num}</p>
        <button ref={this.btnRef}>更新 state</button>
      </div>
    )
  }
}
